import { useSelector,useDispatch } from "react-redux";
// 导入actionsCreater
import { increment,decrement, addToNum } from "./store/modules/countStore";
import { fetchChannelList } from "./store/modules/channelStore";
import { useEffect } from "react";

function App(){
    // useSelector
    const {count} = useSelector(state => state.counter)
    const {channelList} = useSelector(state => state.channel)
    const dispitch = useDispatch()
    useEffect(()=>{
        dispitch(fetchChannelList())
    },[dispitch])
    return (
        <div>
            <div>App</div>
            <button onClick={()=>dispitch(decrement())}>-</button>
            <button onClick={()=>dispitch(increment())}>+</button>
            <button onClick={()=>{dispitch(addToNum(10))}}>Add to 10</button>
            <div>{count}</div>
            <ul>
                {channelList.map(item=><li key={item.id}>{item.name}</li>)}
            </ul>
        </div>
    )
}
export default App